// // 无状态组件 statelessComponent 
// // 慢慢就发展成为函数式组件
// // Display 
// import React from "react" 
// interface ChildProps{
//     count:number;
// }
// const Child:React.StatelessComponent<ChildProps>=(props:ChildProps)=>{
//     return (
//         <div>
//             Child {props.count}
//         </div>
//     )
// }
// export default Child

import React,{Component} from "react";

interface Props{
    count:number;
}
interface State{

}

class Child extends Component<Props,State>{
    constructor(props:Props){
        super(props)// 运行基类的constuctor 才能成为组件 
    }
    // 生命周期函数
    componentDidMount(): void {
        console.log('组件挂载了')
    }
    componentWillUnmount(): void {
        console.log('组件卸载了')
    }
    // 阻止组件更新
    shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean {
        console.log('check是否要更新');
        if(this.props.count%2==0){
            return false
        }
        return true;
    }
    componentDidUpdate(prevProps: Readonly<Props>, prevState: Readonly<State>, snapshot?: any): void {
        console.log('组件更新了')
    }
    render(){
        const{count}=this.props 
        return(
            <div>
                Child {count}
            </div>
        )
    }
}
export default Child 